<template>
	<view class="container">
		<van-overlay :show="showCarPic" @click="onClickHide">
			<view class="wrapper">
				<image src="../../static/home-1.png"></image>
			</view>
		</van-overlay>
		<van-tabs type="card" :color="primaryColor">
			<van-tab title="行程">
				<view style="margin-top: 20px;">
					
					<van-cell title="用车人" :value="detailData.passengers[0].name" />
					<van-cell title="申请时间" :value="detailData.createTime" />
					<van-cell title="用车人电话" :value="detailData.passengers[0].tel" />
					 <van-cell title="用车类型" :value="orderType" />
					  <van-cell title="申请编号" :value="detailData.id" />
					 <van-cell title="当前状态" :value="orderStatusText" />
					<template v-if="detailData.orderType == 'yuyue'">
						<van-cell title="发车时间" :value="detailData.setoffTime" />
						<van-cell title="返回时间" :value="detailData.backTime" />
						<van-cell title="乘坐人数" :value="detailData.passengersNum" />
						 <van-cell title="用车数量" :value="detailData.setoffTime" />
						 
						<van-cell title="乘车地点" :value="detailData.setoffAddress" />
						<van-cell title="到达地点" :value="detailData.arrivalAddress" />
						<van-cell title="用车事由" :value="detailData.applyReason" />
						<van-cell title="接受拼车" :value="detailData.allowCarpooling == 'yes' ? '是' : '否'" />
					</template>
					<template v-if="detailData.orderType == 'jieji'">
						<van-cell title="航班号" :value="detailData.airNumber" />
						<van-cell title="乘坐人数" :value="detailData.passengersNum" />
						 <van-cell title="用车数量" :value="detailData.setoffTime" />
						<van-cell title="到达地点" :value="detailData.arrivalAddress" />
						<van-cell title="备注" :value="detailData.note" />
					</template>
					<template v-if="detailData.orderType == 'songji'">
						<van-cell title="航班号" :value="detailData.airNumber" />
						<van-cell title="乘坐人数" :value="detailData.passengersNum" />
						 <van-cell title="用车数量" :value="detailData.setoffTime" />
						<van-cell title="乘车地点" :value="detailData.setoffAddress"  />
						<van-cell title="备注" :value="detailData.note" />
					</template>
					<van-cell title="里程(KM)" :value="detailData.totalKM" />
					<van-cell-group title="车辆信息">
						<!-- <van-cell title="车辆照片" is-link value="点击查看" @click="onClickShow" /> -->
						<van-cell title="车辆品牌" :value="detailData.zBus.brand" />
						<!-- <van-cell title="车辆颜色" :value="detailData.zBus.color"/> -->
						<van-cell title="车辆牌照" :value="detailData.zBus.chepai" />
					<!-- 	<van-cell title="司机名称" :value="detailData.zDriver.name" />
						<van-cell title="司机电话" :value="detailData.zDriver.tel" />
						 -->

					</van-cell-group>

					<view style="margin-top: 20px;"></view>

					<view v-for="(item,index) in detailData.trips" :key="index">
						<view class="plus-address">
							<view style="flex: 1;">
								<view style="color: #505050; font-size: 16px;margin-bottom: 5px;">
									<text>新增地址({{index + 1}})</text>
								</view>
								<view style="color: #888;font-size: 14px;">
									<text>到达地址：{{item.arrivalAddress}}</text>
								</view>
								<view style="color: #888;font-size: 14px;">
									<text>返回时间：{{item.backTime}}</text>
								</view>
								<view style="color: #888;font-size: 14px;">
									<text>乘坐人数：{{item.passengersNum}}</text>
								</view>
							</view>
							<view style="width: 60px;display: flex;align-items: center;">
								<!-- <van-button :color="primaryColor" size="mini">删除</van-button> -->
							</view>
						</view>
						<view class="split"></view>
					</view>

					<view v-if="detailData.status == 'dispatched'" style="margin: 20px 0;">
						<van-button custom-class="left-button" :color="primaryColor" :square="true" size="normal" @click="onStartRoute">开始行程</van-button>
						<van-button @click="onAddAdress" custom-class="right-button" :color="secondaryColor" :square="true" size="normal">添加地址</van-button>
					</view>
					
					<view v-if="detailData.zBD.status == 'travelStarted'" class="margin: 20px 0;">
						<van-button custom-class="left-button" :color="primaryColor" :square="true" size="normal" @click="onCompleteRoute">完成行程</van-button>
						<van-button @click="onAddAdress" custom-class="right-button" :color="secondaryColor" :square="true" size="normal">添加地址</van-button>
					</view>

				</view>
			</van-tab>


			<!-- <van-tab title="报销">
				<view>
					<view style="margin-top: 20px;"></view>
					
					<view v-for="(item, index) in refoundList" :key="index">
						<view :data-obj='item' @click="onClickRefound" style="padding: 10px 16px;background-color: #fff;">
							<view style="display: flex;flex-flow: row;">
								<view style="flex:1">
									<view style="font-size: 16px;">{{item.type}}</view>
									<view style="font-size: 14px; color: #999;">
										<view>车辆牌照：{{detailData.zBus.chepai}}</view>
										<view>缴费日期：{{item.time}}</view>
										<view>金额：{{item.total}}元</view>
										<view>状态：{{item.statusText}}</view>
									</view>
								</view>
								<view style="display: flex;align-items: center;">
									<van-icon name="arrow" />
								</view>
							</view>
						</view>
						<view class="split"></view>
					</view>
					
					<view v-if="refoundShowOper || refoundList.length == 0" style="margin: 20px 0;">
						<van-button custom-class="left-button" :color="primaryColor" :square="true" size="normal" @click="onApplyRefound">申请报销</van-button>
						<van-button @click="onAddRefound" custom-class="right-button" :color="secondaryColor" :square="true" size="normal">添加报销</van-button>
					</view>
				</view>
			</van-tab> -->
		</van-tabs>
		
		<van-dialog id="van-dialog" />
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import utils from '@/common/utils.js'
	import Dialog from '@/wxcomponents/dialog/dialog'
	import Toast from '@/wxcomponents/toast/toast'
	export default {
		data() {
			return {
				primaryColor: getApp().globalData.primaryColor,
				secondaryColor: getApp().globalData.secondaryColor,
				showCarPic: false,	
				role:'',
				detailData:{},
				refoundList: [],
				refoundShowOper: true, 
				refundPageObj:{
					token: uni.getStorageSync('userinfo').token,
					page:1,
					pagesize:10
				}
			};
		},
		async onLoad(options) {
			this.role = options.role
			this.detailData = JSON.parse(decodeURIComponent(options.data))
		},
		onReachBottom() {
			this.refundPageObj.page++
		},
		async onShow() {
			if(this.detailData.id){
				await this.getDetailData()
			}
			await this.reloadRefoundList()
		},
		methods: {
			async getRefoundList(){
				try{
					const rspData = await utils.req('/reimbursement/getReimbursements', this.refundPageObj)
					const handledData = rspData.list.map(o => {
						let statusText = ''
						if(o.status == 0) {
							statusText = '新建'
						}else if(o.status == 1){
							statusText = '已提交申请'
						}else if(o.status == 2){
							statusText = '通过申请'
						}
						return Object.assign({}, o, {statusText})
					})
					
					if(handledData.filter(o => o.status == 0).length > 0){
						this.refoundShowOper = true
					}else{
						this.refoundShowOper = false
					}
					this.refoundList = [...this.refoundList, ...handledData]
				}catch(e){
					console.error(e)
					Toast(e.msg)
				}
			},
			async reloadRefoundList(){
				this.refundPageObj.page = 1
				this.refoundList = []
				await this.getRefoundList()
			},
			async getDetailData(){
				try{
					const reqData = {
						token: uni.getStorageSync('userinfo').token,
						orderId: this.detailData.id
					}
					const detailDataTemp = await utils.req('/order/getOrderDetail', reqData)
					// detailDataTemp.trips = JSON.parse(detailDataTemp.trips)
					console.log(detailDataTemp.lstCD)
					const busAndDriver = detailDataTemp.lstCD.filter(o => o.driver.userId == uni.getStorageSync('userinfo').userId)[0]
					detailDataTemp.zBD = busAndDriver
					detailDataTemp.zBus=busAndDriver.car
					detailDataTemp.zDriver=busAndDriver.driver
					console.log(busAndDriver)
					// detailDataTemp.zDriver=busAndDriver.driver
					this.detailData = detailDataTemp
				}catch(e){
					console.error(e)
					//TODO handle the exception
				}
			},
			onAddAdress() {
				// const data = encodeURIComponent(JSON.stringify(this.detailData))
				uni.navigateTo({
					url: `../add-address/add-address?orderid=${this.detailData.id}`
				})
			},
			onClickShow() {
				this.showCarPic = true
			},

			onClickHide() {
				this.showCarPic = false
			},
			onClickRefound(event){
				const objData = event.currentTarget.dataset.obj
				objData.cp = this.detailData.zBus.chepai
				const refoundData = encodeURIComponent(JSON.stringify(objData))
				uni.navigateTo({
					url:`../refound-detail/refound-detail?data=${refoundData}`
				})
			},
			onAddRefound(){
				uni.navigateTo({
					url: `../refound/refound?carid=${this.detailData.zBus.carId}`
				})
			},
			async onApplyRefound(){
				Dialog.confirm({
					title: '提示',
					message: '请确认是否申请报销'
				}).then(async() => {
					try{
						const reqData = {
							token: uni.getStorageSync('userinfo').token
						}
						uni.showLoading({
							title:'上传数据中...',
							mask:true
						})
						await utils.req('/reimbursement/subApply', reqData)
						await this.reloadRefoundList()
					}catch(e){
						console.error(e)
						Toast(e.msg)
					}finally{
						uni.hideLoading()
					}
				}).catch(() => {
					// on cancel
				});
			},
			onStartRoute(){
				Dialog.confirm({
					title: '提示',
					message: '请确认是否开始行程'
				}).then(async() => {
					try{
						const reqData = {
							token: uni.getStorageSync('userinfo').token,
							orderId: this.detailData.id
						}
						await utils.req('/order/diverStart', reqData)
						await this.getDetailData()
					}catch(e){
						console.error(e)
						Toast(e.msg)
					}
				}).catch(() => {
					// on cancel
				});
			},
			onCompleteRoute(){
				Dialog.confirm({
					title: '提示',
					message: '请确认是否完成行程'
				}).then(async() => {
					try{
						const reqData = {
							token: uni.getStorageSync('userinfo').token,
							orderId: this.detailData.id
						}
						await utils.req('/order/diverFinish', reqData)
						await this.getDetailData()
					}catch(e){
						console.error(e)
						Toast(e.msg)
					}
				}).catch(() => {
					// on cancel
				});
			}
		},
		computed:{
			orderStatusText(){
				return utils.statusToText(this.detailData.status)
			},
			orderType(){
				if(this.detailData.orderType == 'yuyue'){
					return '预约'
				}else if(this.detailData.orderType == 'jieji'){
					return '接机'
				}else if(this.detailData.orderType == 'songji'){
					return '送机'
				}
			},
		}
	}
</script>

<style lang="scss">
	view {
		--tabs-default-color: $uni-color-primary
	}

	.container {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.left-button {
		width: 60%
	}

	.right-button {
		width: 40%;
		background-color: $uni-color-secondary;
	}

	.plus-address {
		padding: 5px 10px;
		display: flex;
		flex-flow: row nowrap;
		background-color: #fff;

	}

	.split {
		border: 1px solid #f5f5f5;
	}

	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.block {
		width: 120px;
		height: 120px;
		background-color: #fff;
	}
</style>
